<!-- form -->
<form id="registerForm" method="post" class="needs-validation" novalidate>
    {% csrf_token %}

    {% for field in form %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            <input class="form-control" type="{{ field.field.widget.input_type }}" id="{{ field.id_for_label }}"
                   name="{{ field.name }}" placeholder="{{ field.label }}" required>
        </div>
    {% endfor %}

    {% if form.errors %}
        {% for field in form %}
            {% for error in field.errors %}
                <div class="alert alert-danger">
                    <strong>{{ error|escape }}</strong>
                </div>
            {% endfor %}
        {% endfor %}
        {% for error in form.non_field_errors %}
            <div class="alert alert-danger">
                <strong>{{ error|escape }}</strong>
            </div>
        {% endfor %}
    {% endif %}

    <div class="form-group">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="checkbox-signup" checked>
            <label class="custom-control-label" for="checkbox-signup">
                I accept <a href="javascript: void(0);" class="text-muted">Terms and Conditions</a>
            </label>
        </div>
    </div>
    <div class="form-group mb-0 text-center">
        <button class="btn btn-primary btn-block" type="submit"><i class="mdi mdi-account-circle"></i> Sign Up</button>
    </div>
    <!-- social-->
    <div class="text-center mt-4">
        <p class="text-muted font-16">Sign up using</p>
        <ul class="social-list list-inline mt-3">
            <li class="list-inline-item">
                <a href="javascript: void(0);" class="social-list-item border-primary text-primary"><i
                        class="mdi mdi-facebook"></i></a>
            </li>
            <li class="list-inline-item">
                <a href="javascript: void(0);" class="social-list-item border-danger text-danger"><i
                        class="mdi mdi-google"></i></a>
            </li>
            <li class="list-inline-item">
                <a href="javascript: void(0);" class="social-list-item border-info text-info"><i
                        class="mdi mdi-twitter"></i></a>
            </li>
            <li class="list-inline-item">
                <a href="javascript: void(0);" class="social-list-item border-secondary text-secondary"><i
                        class="mdi mdi-github-circle"></i></a>
            </li>
        </ul>
    </div>
</form>
<!-- end form-->
